<script setup>
import { useStore } from "./store";
// 也可以解构
const store = useStore();
// let { name, count, isAdmin } = store;

// 修改单个值
const changeCount = () => {
  store.count++;
};
// 修改多个值
const changeAll = () => {
  store.$patch({
    count: store.count + 1000,
    name: "Abalam",
  });
};
const changeName = () => {
  store.changeName("fred");
};
const asyncChangeCount = async () => {
  await store.asyncChangeCount(100);
  console.log(50000);
};
</script>

<template>
  <div>
    <p>count: {{ store.count }}</p>
    <p>name: {{ store.name }}</p>
    <p>doubleCount: {{ store.doubleCount }}</p>
    <p>和其他store的getters一起使用: {{ store.countAddAge }}</p>
    <button @click="changeCount">修改 count</button>
    <button @click="changeAll">修改 count 和 name</button>
    <button @click="changeName">修改 name</button>
    <button @click="asyncChangeCount">异步修改 count</button>
  </div>
</template>
